$(function(){
    if(localStorage.getItem("goods")){
        
    var goodsArr = JSON.parse(localStorage.getItem("goods"));
        //获取本地数据并渲染到页面
        $.ajax({
            url:'./data/goods.json',
            type:'get',
            dataType:"json",
            success:function(data){
                //分别遍历本地数据 和 json 数据 找到 json文件里本地数据拥有的 
               
                $.each(data,function(index1,item){
                    $.each(goodsArr,function(index2,item2){
                        //根据id找
                        if(item.id == item2.id)
                        {
                            var str=`<li><input type="checkbox" class="ch"> 
                            <img src="${item.imgurl}" alt=""> 
                            <span class="title">${item.title}</span> 
                            <span class="price">￥${item.price}</span> 
                            <span class="num"><button class="jian">-</button><input type="text" value="${item2.num}"> <button class="jia">+</button></span>
                            <span data-id="${item2.id}"class="del">删除</span></li>`;
                            $(".list").append(str);
                        }
                    })
                
                })
            }
        }) 
            //删除功能
                $('.list').on("click",'.del',function(){
                    var id = $(this).attr("data-id");
                    $(this).parent().remove();
                    $.each(goodsArr,function(index,item){
                            if(item.id == id) {
                                goodsArr.splice(index,1);
                                return false;
                            }
                    })
                          //更新数据  
                          if(goodsArr.length>0)
                         localStorage.setItem("goods",JSON.stringify(goodsArr));
                         else { 
                            $(".head .all").prop("checked",false);
                             localStorage.removeItem("goods");
                             var lis=`<li class="empty">购物车为空</li>`;
                            $(".list").html(lis);
                         }
                    //
                    // console.log($(".del").parent().siblings().children()[0]);
                     //删除后多选框重新选中
                    $(".del").parent().siblings().children().each(function(index,item){
                        if($(this).prop("checked"))
                        $(".head .all").prop("checked",true);
                        if(!$(this).prop('checked'))
                            return false;
                    })
                    
                })
                //多选单选功能
                $(".head .all").click(function(){
                    //多选选中
                    if($(".head .all").prop('checked'))
                    $(".list .ch").prop('checked',true);
                    else 
                    $(".list .ch").prop('checked',false);
                })
                //单选功能
                $(".list").on("click",'.ch',function(){
                    //
                    $(".list .ch").each(function(index,item){
                        
                        if(!$(this).prop("checked"))
                        {
                            $(".head .all").prop("checked",false);
                            //循环中 只要有一个不是true 找到直接跳出循环
                            return false;
                        }
                         $(".head .all").prop("checked",true);
                    })  
                })
                //加减

                $(".list").on("click",'.jian',function(){
                    //this 减法 的
                    var _this = this;
                    //根据id 修改本地数据 同时修改表单数据
                   $.each(goodsArr,function(index,item){
                        if(item.id == $(_this).parent().next().attr("data-id")){
                            //数量--
                            item.num--;
                            $(_this).next().val(parseInt($(_this).next().val()) - 1);
                            if(item.num<1)
                                item.num=1
                            if($(_this).next().val()<1)
                                $(_this).next().val(1);
                            //
                            // var price=$(_this).parent().parent().children().eq(3).html();
                            // var sum1=parseFloat(price.slice(1,10)) * $(_this).next().val();
                            // price = "￥"+sum1;
                            
                            return false;
                        }
                   })

                    localStorage.setItem("goods",JSON.stringify(goodsArr));
                    
                })

                $(".list").on("click",'.jia',function(){
                    var _this = this;
                    $.each(goodsArr,function(index,item){
                        if(item.id == $(_this).parent().next().attr("data-id")){
                            item.num++;
                            $(_this).prev().val(parseInt($(_this).prev().val()) + 1);
                            return false;
                        }
                   })
                    localStorage.setItem("goods",JSON.stringify(goodsArr))
                })
    }
    else {
        var lis=`<li class="empty">购物车为空</li>`;
        $(".list").html(lis);
        
    }
})